<div class="EndpointChart">

	<table role="presentation">

		<tr>
			<td style="padding-right: 10px;">
				<div id="ec_endpointLabel">${nls.monitoring.grid.endpointLabel}</div>
			</td>
			<td><select id="ec_endpointCombo" aria-labelledby="ec_endpointLabel"
				data-dojo-type="ism.widgets.Select" data-dojo-attach-point="endpointCombo"
				data-dojo-attach-event="onChange:changeEndpoint"
				data-dojo-props='name:"endpointCombo",
							fieldWidth: "150px",
							store: new dojo.data.ItemFileWriteStore({
								data: {
									label: "name",
									identifier: "id",
									items: []
								}
							})'>
			</select></td>
			<td style="padding-left: 20px; padding-right: 10px;">
				<div id="ec_datasetLabel">${nls.monitoring.grid.metricLabel}</div>
			</td>
			<td><select id="ec_datasetCombo" aria-labelledby="ec_datasetLabel"
				data-dojo-type="ism.widgets.Select" data-dojo-attach-point="datasetCombo"
				data-dojo-attach-event="onChange:changeDataset"
				data-dojo-props='name:"datasetCombo",
							fieldWidth: "150px",
							store: new dojo.data.ItemFileWriteStore({
								data: {
									label: "name",
									identifier: "name",
									items: []
								}
							})'>
			</select></td>
			<td style="padding-left: 20px; padding-right: 10px;">
				<div id="ec_durationLabel">${nls.monitoring.grid.durationLabel}</div>
			</td>
			<td><select id="ec_durationCombo" aria-labelledby="ec_durationLabel"
				data-dojo-type="ism.widgets.Select" data-dojo-attach-point="durationCombo"
				data-dojo-attach-event="onChange:changeDuration"
				data-dojo-props='name:"durationCombo",
							fieldWidth: "100px"'>
				<option value="300">${nls.monitoring.grid.min5}</option>
				<option value="600">${nls.monitoring.grid.min10}</option>
				<option value="1800">${nls.monitoring.grid.min30}</option>
				<option value="3600" selected="true">${nls.monitoring.grid.hr1}</option>
				<option value="10800">${nls.monitoring.grid.hr3}</option>
				<option value="21600">${nls.monitoring.grid.hr6}</option>
				<option value="43200">${nls.monitoring.grid.hr12}</option>
				<option value="86400">${nls.monitoring.grid.hr24}</option>
			</select></td>
			<td style="padding-left: 15px;">
				<button id="ec_updateButton" data-dojo-type="dijit.form.Button"
					data-dojo-attach-point="updateButton" data-dojo-attach-event="onClick:updateChart">${nls.monitoring.grid.refreshButton}</button>

			</td>
		</tr>
		<tr>
			<td colspan=6></td>
			<td style="padding-left: 20px; vertical-align: top;">${nls.monitoring.lastUpdated}<span style="padding-left: 5px;" id="ec_lastUpdateTime" data-dojo-attach-point="lastUpdateTime">${nls.monitoring.notAvailable}</span><br />
                ${nls.monitoring.dataCollectionInterval}<span style="padding-left: 5px;" id="ec_dataCollectionInterval" data-dojo-attach-point="dataCollectionInterval">${nls.monitoring.interval.fiveSeconds}</span></td>
		</tr>		
	</table>

	<div id="endpointChart_node"></div>

	<div id="endpointChart_legend"></div>
</div>
